<template>
	<view>
		<cu-custom bgColor="bg-gradual-pink" :isBack="true" :bgColorStyle="theme">
			<block slot="backText">{{$t("返回")}}</block>
			<block slot="content">单表DEMO</block>
		</cu-custom>
		<form @submit="save" style='display:block;'>
			<view id='main' v-show='TabCur == 0'>
				<js-input labelName='单行文本' path='testInput' :value='main.testInput' :maxlength="200"></js-input>
				<js-textarea labelName='多行文本' path='testTextarea' :value='main.testTextarea' :maxlength="200">
				</js-textarea>
				<js-select :blankOption="true" labelName='下拉框' dictType="sys_menu_type" path='testSelect'
					:value='main.testSelect'></js-select>
				<js-checkbox labelName='下拉多选' dictType="sys_menu_type" path='testSelectMultiple'
					:value='main.testSelectMultiple'></js-checkbox>
				<js-select :blankOption="true" labelName='单选框' dictType="sys_menu_type" path='testRadio'
					:value='main.testRadio'></js-select>
				<js-checkbox labelName='复选框' dictType="sys_menu_type" path='testCheckbox' :value='main.testCheckbox'>
				</js-checkbox>
				<js-input labelName='日期选择' mode='date' path='testDate' :value='main.testDate'></js-input>
				<js-input labelName='日期时间' mode='datetime' path='testDatetime' :value='main.testDatetime'></js-input>
				<js-tree-select :value='main.testUser.userCode' :labelValue='main.testUser.userName'
					url='a/sys/office/treeData?isLoadUser=true' labelName="用户选择 : " path="testUser.userCode"
					labelPath="testUser.userName"></js-tree-select>
				<js-tree-select :value='main.testOffice.officeCode' :labelValue='main.testOffice.officeName'
					url='a/sys/office/treeData' labelName="机构选择 : " path="testOffice.officeCode"
					labelPath="testOffice.officeName"></js-tree-select>
				<js-tree-select :value='main.testAreaCode' :labelValue='main.testAreaName' url='a/sys/area/treeData'
					labelName="区域选择 : " path="testAreaCode" labelPath="testAreaName"></js-tree-select>
				<js-textarea labelName='备注' path="remarks" :value='main.remarks'></js-textarea>
				<js-image-upload bizType="testData_image" imageDel="testData_image__del" bizKey="1148170340563320832">
				</js-image-upload>
				<js-file-upload bizType="testData_file" fileDel="testData_file__del" bizKey="1148170340563320832">
				</js-file-upload>
			</view>
			<button class="margin-top text-white" :style="{backgroundColor:theme}" form-type="submit">保存</button>
		</form>
	</view>
</template>
<script>
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				CustomBar: this.CustomBar,
				TabCur: 0,
				main: {
					testUser: {},
					testOffice: {}
				}
			}
		},
		computed: {
			...mapState(["theme"])
		},
		mounted() {
			/* this.get('1358632213327491072'); */
			this.main = {
				testUser: {},
				testOffice: {}
			}
		},
		methods: {
			// 单选?
			// 多选?
			// 可以选择父级节点?
			// 是否返回全路径
			// 保存
			save(e) {
				let formData = e.detail.value
				formData.id = ""
				console.log(formData)
				this.$request({
					url: "a/test/testData/save",
					data: formData,
					success: (res) => {
						console.log(res.data)
						uni.showModal({
							title: '提示',
							content: res.data.message,
							showCancel: false,
							cancelText: '取消',
							confirmText: '确认',
							success: res => {},
							fail: () => {},
							complete: () => {}
						});
					}
				})
			},
			get(id) {
				this.$request({
					url: "a/test/testData/get?id=1358632213327491072",
					method: 'GET',
					success: (res) => {
						this.main = res.data
						this.subList = this.main.testDataChildList
					}
				})
			}
		}
	}
</script>
<style>
	.cu-form-group .title {
		min-width: calc(4em + 15px);
	}
</style>
